<template lang="">
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
  <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item>页面信息管理</el-breadcrumb-item>
  <el-breadcrumb-item>轮播图管理</el-breadcrumb-item>
</el-breadcrumb>
    <el-row class="search">
  <el-col :span="4">
    <el-button type="primary" round @click="addProuct">添加图片</el-button>
  </el-col>
</el-row>
  </el-row>
        <el-table
                :data="list"
                style="width: 90%"
               >
            <el-table-column
            prop="id"
                    fixed
                    label="图片编号"
                    width="150"
                    align="center">
            </el-table-column>
            <el-table-column
            prop="picUrl"
                    label="图片"
                    width="230"
                    align="center">
                    <template slot-scope="scope">
                      <!-- 图片显示 -->
        <img :src="scope.row.picUrl" alt="" style="width: 50px;height: 50px">
 </template>
            </el-table-column>
            <el-table-column
            prop="picUrl"
                    label="图片URL"
                    width="250"
                    align="center">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="120">
                <template slot-scope="scope">
  <el-button @click="handleDelete(scope.row)" type="text" size="small"
    >删除</el-button
  >
  <el-button @click="handleUpdate(scope.row)" type="text" size="small"
    >编辑</el-button
  >
</template>
            </el-table-column>
        </el-table>
        <!-- 编辑显示对话框 -->
        <el-dialog title="图片信息" :visible.sync="updateDialogVisible">
  <el-form :model="updateForm">
    <el-form-item label="图片编号">
      <el-input aria-readonly="true" v-model="updateForm.id" :disabled="true"></el-input>
    </el-form-item>
    <el-form-item label="图片">
     <img :src="updateForm.picUrl" style="width: 100px; height: 100px;">
     <el-upload
              class="avatar-uploader"
              action="/api/products/upload"
              :show-file-list="false"
              :on-success="handleAvatarSuccess1"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="imgUrl" :src="imgUrl" class="avatar"/>
              <p v-else class="tishi">点击上传新图片</p>
            </el-upload>
    </el-form-item>

  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="updateDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="confirmUpdate()">确 定</el-button>
  </div>
</el-dialog>
<!-- 添加 -->
<el-dialog title="图片信息" :visible.sync="addDialogVisible">
  <el-form :model="addForm">
   
    <el-form-item label="图片">
      <el-form-item>
    <el-upload
  class="avatar-uploader"
  action="/api/lunbo/upload"
  :show-file-list="false"
  :on-success="handleAvatarSuccess"
  :before-upload="beforeAvatarUpload">
  <img v-if="imgUrl" :src="imgUrl" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
  </el-form-item>
    </el-form-item>

  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="addDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="add()">确 定</el-button>
  </div>
</el-dialog>
  </div>
</template>
<script>
export default {
  name: "Lunbo",
  data() {
    return {
      selfstyle: { backgroundColor: "black" },
      list: [],
      updateDialogVisible: false,
      updateForm: {
        id: "",
        picUrl: "",
      },
      addForm: {
        id: "",
        picUrl: "",
      },
      pageNum: 1,
      pageSize: 10,
      name: "",
      total: 0,
      imgUrl: "",
      addDialogVisible: false,
    };
  },
  created() {
    console.log(this)
    this.getInfo();
  },
  methods: {
    async getInfo() {
      const { data: res } = await this.$api.lunbo.getPic({
        parms: this.queryInfo,
      });
      this.list = res.data.slice(
        (this.pageNum - 1) * this.pageSize,
        this.pageNum * this.pageSize
      );
      this.total = res.data.length;
    },
    async handleDelete(row) {
      //row为对象
      await this.$api.lunbo.deletePic(row.id);
      this.getInfo();
      this.$message.success("删除成功");
    },
    handleUpdate(row) {
      (this.updateDialogVisible = true), (this.updateForm = { ...row });
    },
    async confirmUpdate() {
      const { data: res } = await this.$api.lunbo.update(this.updateForm);
      if (res.code !== 20031) {
        return this.$message.error("更新用户信息失败！");
      }
      this.updateDialogVisible = false;
      this.getInfo();
      this.$message.success("更新信息成功");
    },
    //监听改变事件
    handleSizeChange(val) {
      this.pageSize = val;
      this.getInfo();
    },
    handleCurrentChange(newSize) {
      this.pageNum = newSize;
      this.getInfo();
    },
    addProuct() {
      this.addDialogVisible = true;
    },
    async add() {
      const { data: res } = await this.$api.lunbo.addPic(this.addForm);
      //将接口中需要的内容写入
      this.total++;
      if (res.code !== 20011) {
        return this.$message.error("添加用户信息失败！");
      }
      this.addDialogVisible = false;
      this.getInfo();
      this.$message.success("添加信息成功");
    },
    handleAvatarSuccess(res) {
      this.imgUrl = res.data;
      this.addForm.picUrl = res.data;
    },
    beforeAvatarUpload(file) {
      const isJPG =
        file.type === "image/jpeg" ||
        file.type === "image/jpg" ||
        file.type === "image/png";
      // 限制只能3M以内的图片
      const isLt2M = file.size / 1024 / 1024 < 3;

      if (!isJPG) {
        this.$message.error("图片只能是 JPG 或者 PNG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 3MB!");
      }
      return isJPG && isLt2M;
    },
    handleAvatarSuccess1(res) {
      
      this.imgUrl='',
      this.updateForm.picUrl=res.data
    },
  },
};
</script>
<style lang="less" scoped>
::v-deep .el-table {
  background-color: #adad;
}
.search {
  margin-top: 10px;
  margin-bottom: 10px;
}
.avatar {
  width: 220px;
  height: 220px;
}
</style>